<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <!--引入的vue.js-->
    <script src="/js/vue.js"></script>
    <!--引入elementUI的css-->
    <link  type="text/css" rel="stylesheet" href="/css/index.css">
    <!--引入elementUI的js-->
    <script src="/js/index.js"></script>
    <!--引入axios.js-->
    <script src="/js/axios.min.js"></script>
    <script src="/js/echarts.js"></script>

    <style>
        #app {
        display: flex;
        flex-direction: column;
        align-items: center; /* 水平居中 */
        padding: 20px;
        width: 800px;
        margin: 0 auto; /* 确保容器在页面中间 */
        }

        .header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 10px;
        }

        .date-picker {
            margin-right: 20px;
        }

        #main {
        width: 800px;
        height: 600px;
        margin-top: 20px;
    }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <el-date-picker
                v-model="yearMonth"
                type="month"
                @change="yearMonthChange"
                placeholder="选择月"
                class="date-picker">
        </el-date-picker>

    </div>
<!--    &lt;!&ndash; 为 ECharts 准备一个定义了宽高的 DOM &ndash;&gt;-->
<!--    <div id="main" style="width: 800px;height:600px; margin: 0 auto "></div>-->
    <div id="main"></div>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                yearMonth:'',
                monthDay:[],
                addCount:[],
                updateCount:[],
                deleteCount:[],
            }
        },
        mounted: function () {
            let currentDate = new Date();
            // 获取当前年份和月份
            this.yearMonth = currentDate.getFullYear()+'-'+(currentDate.getMonth()+1<10?'0'+(currentDate.getMonth()+1):currentDate.getMonth()+1);

            console.log("yearMonth:"+this.yearMonth);
            this.loadData();
         },
        methods: {

            loadData(){
                var _this = this;
                // 使用axios发送登录请求
                axios.get('/operateLog/queryEchartsDataByYearMonth?yearMonth='+this.yearMonth)
                    .then(response => {
                        if (response.data.code==200) {
                            _this.monthDay=[];
                            _this.addCount=[];
                            _this.updateCount=[];
                            _this.deleteCount=[];
                            let data=response.data.data;
                            for(let i=0;i<data.length;i++){
                                let item =data[i];
                                _this.monthDay.push(item.monthDay);
                                _this.addCount.push(item.addCount);
                                _this.updateCount.push(item.updateCount);
                                _this.deleteCount.push(item.deleteCount);
                                console.log("hhhhhhhhhh::"+_this.monthDay);
                            }
                            _this.showEcharts();

                        }
                    })
                    .catch(error => {
                        this.loading = false;  // 隐藏加载动画
                        console.error('Echarts请求错误:', error);
                        alert('Echarts请求错误');
                    });
            },

            //Echarts
            showEcharts(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '每月操作日志统计图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {data: ['添加', '修改', '删除']},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        top: '15%', // 增加顶部间距，避免 markPoint 与 toolbox 冲突
                        left: '10%',
                        right: '10%',
                        bottom: '15%'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monthDay,
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series: [
                        {
                            name: '添加',
                            type: 'line',
                            data: this.addCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                        {
                            name: '修改',
                            type: 'line',
                            data: this.updateCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                        {
                            name: '删除',
                            type: 'line',
                            data: this.deleteCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },

            yearMonthChange(v){
                //v不是选择后出现在输入框的值，所以要自己拼装查询的参数
                let year =  v.getFullYear();
                let month  = v.getMonth()+1;
                this.yearMonth = year+"-"+(month<10?"0"+month:month);
                console.log("yearMonth:"+this.yearMonth);
                this.loadData();
            },
        }
    });

</script>
</body>
</html>